/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-19 15:44:42
 * @LastEditTime : 2023-06-20 15:10:56
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\HomePage\Machinery.jsx
 * @Description  :
 */
import './Scss/Machinery.scss'
import { Http } from '../../../../Api'
import { useLocalStorageState, useRequest, useSessionStorageState, useSize } from 'ahooks'
import { useEffect, useState, useRef } from 'react'
import { Column } from '@ant-design/plots'
import { colorRgb } from '../../../../Configure/Common'
import { Tabs } from 'antd'
import { GroupingColumnSetUp } from './Common'

export const Machinery001 = () => {
    const [ClientData] = useLocalStorageState('ClientData')
    const [temporaryData] = useSessionStorageState('temporaryData')
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data, setData] = useState()
    const [List, setList] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            let data = []
            data = list.flatMap(({ tableName, machineCount, machineTypeStandardCount }) => [
                { title: '标配', type: tableName, value: machineTypeStandardCount },
                { title: '已配', type: tableName, value: machineCount },
            ])
            setData(data)
        },
    })

    const onChange = e => {
        runAsync({ url: 'getMachineManageGetListByType', data: { OrganizationUuid: e } })
    }

    useEffect(() => {
        const { organization } = ClientData
        const data = [
            { label: '全部', key: '' },
            ...Object.entries(organization).map(([key, label]) => ({ label, key })),
        ]
        setList(data)
    }, [ClientData])

    useEffect(() => {
        runAsync({ url: 'getMachineManageGetListByType' })
    }, [runAsync])

    return (
        <div className="Machinery001">
            <div className="HomePageTitle">机械管理</div>
            <div className="list">
                <div className="Tab">
                    <Tabs items={List} onChange={onChange} />
                </div>
                <div className="Charts" ref={ChartsBox}>
                    {Data && size?.height > 0 && (
                        <Column {...GroupingColumnSetUp(Data, colorRgb(temporaryData.themeColor, 1), size)} />
                    )}
                </div>
            </div>
        </div>
    )
}
